<template>
    <!-- {{ $router.options.routes }} 获取路由里面的配置详情信息-->
    <!-- {{ $route.path }} 获取的是浏览器默认的路径优先级 /-->
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" active-text-color="#ffd04b"
        background-color="#d9ecff" text-color="#31302d" :collapse="isCollapse" :router="true">
        <!--:router="true"  开启路由-->
        <template v-for="item in $router.options.routes">
            <el-menu-item :index="item.path" v-if="item.children == undefined &&  item.meta ? item.meta.show==true:''">
              
                <component :is="item.meta ?item.meta.icon:''" class="icon"></component>
                <span style="font-weight: 700;">{{ item.meta ? item.meta.title:''}}</span>
            </el-menu-item>
       
        <el-sub-menu :index="item.path" v-if="item.children != undefined && item.meta ? item.meta.show ==true: ''">
            <template #title>
                <!-- <el-icon>
                    <location />
                </el-icon> -->
                <component :is="item.meta ?item.meta.icon:''" class="icon"></component>
                <span>{{ item.meta ? item.meta.title:''}}</span>
            </template>
            <el-menu-item-group>
                <!-- {{ item.children }} -->
                <template v-for="item2 in item.children">
                <el-menu-item :index="item2.path" v-if="item2.meta ? item2.meta.show == true:''">
                    <component :is="item2.meta ? item2.meta.icon:''" class="icon"></component>
                    <span>{{ item2.meta ? item2.meta.title:'' }}</span>
                </el-menu-item>
                
                </template>
            </el-menu-item-group>
        </el-sub-menu>
         </template>
    </el-menu>
</template>
<script setup lang="ts">
import { ref } from "vue"
const isCollapse = ref(false)

</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 190px;
    min-height: calc(100vh - 50px);
}
.icon{
    width: 20px;
    height: 20px;
    padding-right: 5px;
}
</style>